<template>
    <div style="margin: 5px;">
        <div>
            <h3 class="title" @click="actSubId == '0' ? actSubId=action.subactionid : actSubId='0'">
                {{action.subactionname}}
                <i class="top "
                   :class="actSubId == '0' ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i>
                <span class="v-lights lights" v-if="exceptions[action.subactionid]">{{exceptions[action.subactionid]}}</span>
            </h3>
            <v-sub-action :subactionid="actSubId"></v-sub-action>
        </div>
    </div>
</template>

<script>
import vSubAction from './SubAction';
import { get, post } from '@/utils/request.js';

export default {
    name: "Action.vue",
    data() {
        return {
            actSubId: "0"
            // exceptions: {}
        }
    },
    mounted() {
        /*get('/esbview/v-action/exceptions/' + this.action.actionid, '').then(res => {
            this.exceptions = res.exceptions;
            if (this.exceptions == undefined) {
                this.exceptions = {};
            }
        });*/
    },
    watch: {
        /*action: {
            handler(newValue, oldValue) {
                if (newValue != undefined && (oldValue == undefined || newValue.actionid != oldValue.actionid)) {
                    this.loadAction(newValue);
                }
            },
            deep: true
        }*/
    },
    props: ["action", "index", "exceptions"],
    components: {
        vSubAction
    },
    methods: {
        /*loadAction(action) {
            this.actSubId = "0";
            this.exceptions = {};
            get('/esbview/v-action/exceptions/' + action.actionid, '').then(res => {
                this.exceptions = res.exceptions;
                if (this.exceptions == undefined) {
                    this.exceptions = {};
                }
            });
        }*/
    }
}
</script>

<style lang="scss" scoped>
$iconbg: #a9b1c8;
.title {
    width: 85px;
    font-size: 14px;
    font-weight: normal;
    border: 1px solid #ffc5b8;
    height: 35px;
    line-height: 35px;
    border-radius: 3px;
    padding-left: 12px;
}
.top {
    color: $iconbg;
}
.lights {
    position: relative;
}
</style>